<template>
    <div class="beds-choose">
        <cjc-nav title="床位选择" @customRouter="$router.push({ name: 'dorm_list' })"></cjc-nav>
        <div class="bc-container">
            <div class="house-type">
                <img :src="dormInfo.IMAGE" alt="">
            </div>
            <div class="house-infomation">
                <div class="house-infomation-name">{{dormInfo.BUILDING_NAME}}&nbsp;{{dormInfo.ROOM_NUMBER}}</div>
                <div class="house-infomation-explain">
                    <p class="title">基础设施：</p>
                    <p class="content">{{dormInfo.DISC}}</p>
                </div>
            </div>
            <div class="house-select">
                <Button v-for="(item, index) in bedList" :key="index"
                    @click="selectBed(index)"
                    class="house-select-btn"
                    :disabled="!item.FLAG"
                    :type="index === activeIndex ? 'primary' : 'ghost'">{{item.BED_NAME}}</Button>
            </div>
            <div class="house-button">
                <Button type="primary" long @click="comfirm">确认选择</Button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'beds-choose',
    data() {
        return {
            activeIndex: -1,
            bed: -1
        }
    },
    computed: {
        dormInfo() {
            return this.$store.state.DormitoryList[this.$route.params.dormIndex]
        },
        bedList() {
            try {
                let tempArray = this.dormInfo.BEDS.map(item => {
                    item.BED_NAME = '床位' + item.BED
                    return item
                })
                return tempArray
            } catch (Error) {
                return []
            }
        }
    },
    methods: {
        // 选择床位
        selectBed(index) {
            this.activeIndex = index
            // 设置床位编号
            this.bed = this.dormInfo.BEDS[index].BED
        },
        comfirm() {
            let dormInfo = this.dormInfo
            let bedInfo = this.bedList[this.activeIndex]
            let contentStr = `
                            <div><i class="ivu-icon ivu-icon-ios-checkmark-outline" style="font-size: 32px;color: #19be6b;"></i></div>
                            已选择${dormInfo.BUILDING_NAME}${dormInfo.ROOM_NUMBER} ${bedInfo.BED_NAME}<br>
                            请在1小时内完成缴费，否则系统将自动退回寝室！`
            this.$vux.confirm.show({
                // title: '选寝确认',
                content: contentStr,
                cancelText: '取消',
                confirmText: '确认',
                onConfirm: () => {
                    this.comfirmDormitory()
                }
            })
        },
        getParams() {
            let userInfo = this.$store.state.userInfo
            if (this.bed < 0) {
                this.$Message.error('请选择床位')
                return null
            }
            let params = {
                dId: this.dormInfo.D_ID,
                bed: this.bed,
                ksh: userInfo.KSH,
                xh: userInfo.XH,
                xm: userInfo.XM,
                xb: userInfo.XBM === '1' ? '男' : '女',
                sfzjh: userInfo.SFZJH,
                zy: 'zhaungye',
                nj: userInfo.NJH,
                tel: userInfo.TEL
            }
            return params
        },
        // 确认选择寝室
        async comfirmDormitory() {
            let params = this.getParams()
            const msg = this.$Message.loading({
                duration: 0,
                content: '寝室选择中...'
            })
            await this.$store.dispatch('comfirmDormitory', params)
            // 完成当前步骤
            await this.modifiedStep(this.$store.state.CurrentStepInformation.STEP_ID)
            msg()
            // 重置步骤列表数据
            this.$store.commit('SET_registInfo', null)
        },
        // 确认当前步骤
        modifiedStep(stepId) {
            this.$store.dispatch('modifiedStep', {
                ksh: this.$store.state.userInfo.KSH,
                stepId,
                content: '',
                status: 1
            }).then(response => {
                if (response.data.status === 1000) {
                    this.$store.dispatch('setRegisterInfo', this.$store.state.userInfo)
                }
                this.$router.push({name: 'comfirm_infomation'})
            })
        }
    }
}
</script>

<style lang="less">
.beds-choose {
    min-height: calc(~'100vh - 50px');
    background-color: #fff;
    .bc-container {
        padding: 20px;
        .house-type {
            height: 300px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .house-infomation {
            padding: 10px 0;
            .house-infomation-name {
                font-size: 20px;
                font-weight: bolder;
                text-align: center;
            }
            .house-infomation-explain {
                .title {
                    margin: 5px 0;
                    font-size: 14px;
                }
                .content {
                    text-indent: 2em;
                }
            }
        }
        .house-select {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .house-select-btn {
                width: 80px;
                margin: 10px 10px 0;
            }
        }
        .house-button {
            padding: 10px 20px;
        }
    }
}
</style>
